<template>
	<view class="uy-sticky" :style="{background: bgColor, top: `${safetyTop}px`, 'z-index': zIndex}">
		<slot />
	</view>
</template>

<script>
	/**
	 * sticky 吸顶
	 * @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
	 * @property {String} bgColor  吸顶区域的背景颜色
	 * @property {Number} offsetTop 吸顶容器到顶部某个距离的时候，进行吸顶
	 * @property {Number} zIndex z-index值 
	 */
	import props from './props.js'
	export default {
		name:"uy-sticky",
		mixins: [props],
		data() {
			return {
				
			};
		},
		computed: {
			safetyTop() {
				let obj;
				uni.getSystemInfo({
					success: res => {
						obj = res;
					}
				})
				let num = obj.statusBarHeight + (Number(this.offsetTop) || 0);
				return num
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uy-sticky {
		position: -webkit-sticky;
		position: sticky;
		top: var(--window-top);
	}
</style>